<template>
    <div class="sider">
        <a-layout-sider>
            <a-menu mode="inline" :open-keys="openKeys"
                    @openChange="onOpenChange"
                    @click="handleClick"
                    :default-selected-keys="openSelectedKeys">
                <template v-for="item in list">
                    <a-menu-item v-if="!item.children" :key="item.key" >
                        <router-link :to="item.to">
                            <a-icon :type="item.icon" theme="filled" />
                            <span>{{ item.label }}</span>
                        </router-link>
                    </a-menu-item>
                    <a-sub-menu v-else :key="item.key">
                        <span slot="title">
                            <a-icon :type="item.icon" theme="filled"/>
                            <span>{{ item.label }}</span>
                        </span>
                                <a-menu-item v-for="child in item.children" :key="child.key">
                                    <router-link :to="child.to">
                                        {{ child.label }}
                                    </router-link>
                                </a-menu-item>
                    </a-sub-menu>
                </template>

            </a-menu>
        </a-layout-sider>
    </div>

</template>

<script>
export default {
    name: "HomeSider",
    data(){
        return{
            rootSubmenuKeys: [],//所有展开的key项（最外层）
            openKeys: ['1'],//二层展开项
            openSelectedKeys:['1'],//里层展开项
            list: [
            ]
        }
    },
    watch: {
        $route: {
            handler (to, from) {
                if (to.name === 'redirect') return
                // console.log(to.path,'tototo')
            },
            immediate: true
        },
    },

    methods:{
        handleClick(e) {
            this.openSelectedKeys=[e.key]
            this.$store.commit('user/SET_openSelectedKeys',this.openSelectedKeys)
        },
        onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
            this.$store.commit('user/SET_openKeys', this.openKeys)
        }
    },
    created() {
        this.list = this.$store.getters.menu
        let listTool=this.$store.getters.menu
        this.rootSubmenuKeys=listTool.map(item => item.key)
        if( this.$store.getters.openKeys){
            this.openKeys=this.$store.getters.openKeys
        }
        if(this.$store.getters.openSelectedKeys){
            this.openSelectedKeys=this.$store.getters.openSelectedKeys
        }
        // console.log(this.rootSubmenuKeys,'this.rootSubmenuKeys')
        console.log(this.$store.getters.openKeys,this.$store.getters.openSelectedKeys)
    }
}
</script>

<style scoped lang="scss">
.sider{
    //height: 100vh;
    height: calc(100vh - 65px);
    width: 220px;
    background-color: #f0f2f5;
}
.ant-layout-sider{
    min-width: 220px!important;
}
.ant-layout-sider-dark{
    min-width: 220px!important;
}
.ant-menu{
    width: 220px!important;
    background-color: #f0f2f5;
}
//展开的
.ant-menu-submenu-open{
    //background-color: white;
    //box-shadow: 0 2px 12px 0 rgba(152, 150, 150, 0.3);
    //border-radius: 15px;

}
.ant-menu-sub{
    background-color: #f0f2f5;
}
::v-deep .ant-menu-submenu .ant-menu{
    background-color: #f0f2f5;
}
::v-deep .ant-menu-inline{
    border: 0;
}
::v-deep .ant-menu-item-selected{
    background-color: white!important;
    box-shadow: 0 2px 12px 0 rgba(211, 210, 210, 0.3);
    border-radius: 8px;
    color: black;
}
::v-deep .ant-menu-item::after{
    border: 0;
}
::v-deep .ant-menu-item-selected .anticon{
    color:#1890ff;
    position: relative;
    z-index: 4;
}
//::v-deep .ant-menu-item-selected .anticon::after{
//    content: '';
//    display: block;
//    width: 20px;
//    height: 20px;
//    background-color: #1890ff;
//    position: absolute;
//    left: 0;
//    top: 0;
//    z-index: 2;
//}


</style>
